feat: add unplugin-vue-components and unimport integration
#20536
Conversation
johnleider
changed the title
unplugin-vue-components and unimport integrationunplugin-vue-components and unimport integration
KaelWD
changed the title
unplugin-vue-components and unimport integrationunplugin-vue-components and unimport integration
packages/vuetify/build.config.mts
Outdated
| @@ -0,0 +1,94 @@ | |||
| import { defineBuildConfig } from 'unbuild' | |||
There was a problem hiding this comment.
Why are you using a separate build process for this?
There was a problem hiding this comment.
We must split client and node builds, I can move it to rollup but I like unbuild.
There was a problem hiding this comment.
done:
- added some jsdocs to rollup config files to have auto complettion and suggestions in the ide
- removed
unbuildand movedunplugin/*.tsbuild to Rollup - fixed also the lint script: added rootDir and custom exclude in
tsconfig.check.json
|
I didn't check Vitest using Vuetify Vite playground configuration: reverted changes and CI green. |
| return JSON.parse(await readFile(path.resolve(vuetifyBase, 'dist/json/importMap.json'), 'utf-8')) | ||
| } | ||
| async function importMapLabs (vuetifyBase: string): Promise<ImportLabsComponents> { | ||
| return JSON.parse(await readFile(path.resolve(vuetifyBase, 'dist/json/importMap-labs.json'), 'utf-8')) |
There was a problem hiding this comment.
It will be better to add importMap.json and importMap-labs.json to package exports, this change will allow use dynamic import instead resolving vuetify base and reading the file (or just use dynamic import via vuetify/dist/json/importMap.json or vuetify/dist/json/importMap-labs.json).
There was a problem hiding this comment.
We're using readFile here because node 20 logs a warning for import attributes
|
This PR will be superseded by another 3 PR: |
|
New @unvuetify/monorepo repository created and initial packages versions published, we'll have some more Vite/Nuxt utilities in this new repository |
3 participants
Description
This PR includes:
unimportpresets for Vuetify composables and directivesand Vuetify One composablesunplugin-vue-componentsresolvers for Vuetify components and directivesunimportandunplugin-auto-importto latest versions (3.13.1 and 0.18.3 respectively)and Vuetify One composablesaddunbuildto build the new new subpackages exports (node stuff): I have no idea how to configure/callunbuildwith custombuild.config.mtsconfiguration file, right now usingbuild.config.mtsin vuetify package root, should be moved tobuildfolder: should be fixed with this PR feat: add--configto the CLI unjs/unbuild#440 (it should be ported to v2 or update here to use v3-rc version)vuetify/unimportandvuetify/unplugin-vue-componentsto package exports andtypesVersionsunplugin-vue-componentsto auto import components, lab components and directives: reverted since the CI test process hangs (I need to review Vite playground configuration)We need to add these 2 new integrations somewhere in the docs.
Note
We need to review the lint script, right now I excluded
packages/vuetify/src/unpluginfrom thetsconfig.dist.jsonfile to allow build vuetify.Note
Maybe we should add a new package or move this PR to another repository.
Tip
vuetify/unplugin-vue-components: will resolve components and directives: the directives will be missing from the Vue module augmentation and so Volar will not suggest Vuetify directives in the Vue templates.vuetify/unplugin-vue-componentswon't be able to auto import Vuetify composables.vuetify/unimportviaunplugin-auto-import: will auto import Vuetify composables and directives and won't be able to auto import Vuetify components.vuetify/unimportwill add Vuetify directives in the Vue module augmentation to allow Volar suggest them in the Vue templates (when feat(vue): add auto-import directives unplugin/unplugin-auto-import#534 merged and released).vite-plugin-vuetify: same behaviorvuetify/unplugin-vue-components.vite-plugin-vuetifyadds Vuetify SASS variables support.vuetify-nuxt-module: will usevuetify/unimportto auto-import Vuetify composables and directives (requires this PR feat(nuxt,schema): add directives folder nuxt/nuxt#29203 merged and released) and will use Nuxt internal components loader to load Vuetify components (requires this PR feat!: use Nuxt components loader instead custom Vite plugin nuxt-module#276 merged and released). Since it will usevuetify/unimport, Vuetify directives will be suggested by Volar in Vue templates.vuetify-nuxt-moduleadds Vuetify SASS variables support via custom styles Vite plugin.Note
vuetify/unplugin-vue-components,vuetify/unimport,unplugin-auto-importandvite-plugin-vuetifycannot handle it and currentvuetify-nuxt-modulewill fail to resolveLazyV***components since it is based onvite-plugin-vuetifyto resolve Vuetify components.vuetify-nuxt-modulewill allow to use Vue Lazy Hydration (🤞 ) via Nuxt Delayed Hydration Support andvuetify/unimportpreset.